<%@page import="sun.security.ec.ECDSAOperations.Seed"%>
<%@page import="java.util.LinkedList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ include file="top.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<style type="text/css">
a {
	text-decoration: none;
}

div.container {
	width: 95%;
	margin: 20px auto;
}

.left, .right {
	width: 50%;
	float: left;
}

div.left img {
	margin: 90px auto;
}

h2.name {
	margin: 0;
	padding: 0;
	font-size: 24px;
	font-weight: 400;
	color: #212121;
}

p.comments {
	color: #b0b0b0;
	margin: 0;
	padding: 0;
	padding-top: 8px;
	line-height: 1.5;
	display: block;
}

p.newprice {
	font-size: 18px;
	line-height: 1;
	color: #ff6700;
}

p.oldprice {
	margin-left: .2em;
	color: #b0b0b0;
	text-decoration: line-through;
	font-size: 12px;
}

div.address {
	padding: 30px 50px;
	background: #fafafa;
	border: 1px solid #e0e0e0;
}

div.title {
	font-size: 18px;
	margin-top: 10px;
}

div.option {
	margin-right: 12px;
	margin-top: 10px;
	line-height: 42px;
	height: 42px;
	border: 1px solid #e0e0e0;
	list-style: none;
	cursor: pointer;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	width: 292px;
	font-size: 16px;
	text-align: center;
	border-color: #ff6700;
}

div.selected-list {
	background: #f9f9fa;
	padding: 30px;
	margin-bottom: 30px;
	margin-top: 20px;
}

.total {
	color: #ff6700;
	font-size: 24px;
	padding-top: 20px;
}

.btn {
	display: inline-block;
	width: 158px;
	height: 38px;
	padding: 0;
	margin: 0;
	border: 1px solid #b0b0b0;
	font-size: 14px;
	line-height: 38px;
	text-align: center;
	color: #b0b0b0;
	cursor: pointer;
	-webkit-transition: all .4s;
	transition: all .4s;
}

a.sale-btn {
	width: 298px;
	height: 52px;
	line-height: 52px;
	font-size: 16px;
	background-color: #f25807;
	border-color: #f25807;
	color: #fff;
}

.sale-btn:hover {
	background-color: #f25807;
	border-color: #f25807;
	color: #fff;
}

.btn-like {
	display: block;
	width: 140px;
	height: 52px;
	line-height: 52px;
	padding: 0;
	margin: 0;
	border: 1px solid #b0b0b0;
	background-color: #b0b0b0;
	text-align: center;
	cursor: pointer;
	-webkit-transition: all .4s;
	transition: all .4s;
	font-size: 16px;
	float: right;
}
.btn-like:hover {
    background-color: #757575;
}    

</style>
</head>
<body>
	<c:if test="${empty like}">
		<% response.sendRedirect("error/donotexist.jsp"); %>
	</c:if>

	<div class="container">
		<div class="left">
			<img src="${like.goods.imgpath }" placeholder=" ">
		</div>
		<div class="right">
			<h2 class="name" pid="${like.goods.pid }">${like.goods.name }</h2>
			<script type="text/javascript">
        	document.title="${like.goods.name }";
        </script>
			<p class="comments">${like.goods.comments }</p>
			<div class="price">
				<p class="newprice" style="display: inline-block;">${like.goods.newprice }元</p>
				<p class="oldprice" style="display: inline-block;">${like.goods.oldprice }元</p>
			</div>
			<hr style="color: #fff; margin: 20px auto;">
			<div class="address">湖北省 武汉市 江夏区</div>
			<div class="title">选择颜色</div>
			<div class="option">白色</div>
			<div class="selected-list">
				<p style="display: block;">${like.goods.name }</p>
				<span style="float: right; margin-top: -30px;">${like.goods.newprice }元</span>
				<p class="total">总计： ${like.goods.newprice }元</p>
			</div>
			<div class="btn-box">
				<a href="javascript:void(0);" class="sale-btn btn" id="addCart">加入购物车</a>
				<a class="btn-like">
					<span class="text">喜欢</span>
					<span class="like">${like.count } 人</span>
				</a>
			</div>
		</div>
	</div>

	<script type="text/javascript">
    $(document).ready(function() {
    	
    });
	var pid = parseInt($('h2.name').attr('pid'));
	// console.log(pid,typeof(pid));
    var btn_like = $('a.btn-like');
    $("a#addCart").bind('click',function(event){
    	addGoodsToCart(pid);
    })
    
    btn_like.bind('click', function(event) {
    	//每次点击的时候检查session里边的likeList有没有这种商品，有：pid加到列表，然后like+1；否则Pid移除，like-1
    	<%
    	Integer pid = Integer.parseInt(request.getParameter("pid"));

    	LinkedList<Integer> pidLikeList = (LinkedList<Integer>) session.getAttribute("pidLikeList");
    	if(pidLikeList==null){
    		pidLikeList = new LinkedList<>();
    		session.setAttribute("pidLikeList", pidLikeList);
    		pidLikeList.add(pid);
    		%>
    		 likeGoodsPlusOne($(this),pid);
    		<%
    	}else{
    		
    		if(pidLikeList.contains(pid)){
    			pidLikeList.remove(pid);
    		%>
    			likeGoodsReduceOne($(this),pid);
    		<%
    		}else{
    			pidLikeList.add(pid);
    		%>
    			likeGoodsPlusOne($(this),pid);
    		<%
    		}
    	}
    	%>
      
    });

    function likeGoodsPlusOne(obj,pid){
         var result = 1;
        $.ajax({
            url: 'updateLikeGoodsPlusOne.do',
            type: 'POST',
            data: {'pid': pid},
            timeout: 3000,
        })
        .done(function(callback) {
            console.log("success");
            obj.css('background', 'blue');
            var spanLike = obj.children("span.like");
            spanLike.text(parseInt(spanLike.text())+1);
            result = callback;
            return result;
        })
        .fail(function() {
            console.log("error");
        }) 
    }
    function likeGoodsReduceOne(obj,pid){
         var result = 1;
        $.ajax({
            url: 'updateLikeGoodsPlusOne.do',
            type: 'POST',
            data: {'pid': pid},
            timeout: 3000,
        })
        .done(function(callback) {
            console.log("success"); 
            obj.css('background', '');
            var spanLike = obj.children("span.like");
            
            spanLike.text(parseInt(spanLike.text())-1);
             result = callback;
            return result;
        }) 
    }
    
   // 添加到购物车
       function addGoodsToCart(pid){
         var result = 1;
        $.ajax({
            url: 'addGoodsToCart.do',
            type: 'GET',
            data: {'pid': pid},
            timeout: 3000,
        })
        .done(function(callback) {
             result = callback;
            if(result==1)
            	alert("添加成功！");
        }) 
    }
   
</script>
</body>

</html>

